<template>
  <div class="create_dashboard">
    <a-button class="dashboard_create_button" icon="plus">New Ideation</a-button>
    <a-form-model
      ref="formRef"
      :model="ruleForm"
      :rules="rules"
      layout="vertical"
      labelAlign="right"
      size="large"
    >
      <a-form-model-item label="Name" prop="name" whitespace>
        <a-input v-model="ruleForm.name" size="large" />
      </a-form-model-item>
       <a-form-model-item label="Description" prop="description">
        <a-input
          size="large"
          v-model="ruleForm.description"
          :auto-size="{ minRows: 1, maxRows: 5 }"
        />
      </a-form-model-item>
      <a-form-model-item
        v-for="(item,index) in ruleForm.questions"
        :key="index"
        :label="'Question' + (index + 1)"
        :prop="'questions.' + index + '.content'"
        :rules="{
          required: !index,
          message: 'At least one question needs to be filled in',
        }"
      >
        <a-input v-model="item.content" size="large" />
      </a-form-model-item>
      <a-form-model-item >
        <div style="width: 100%;text-align: right">
          <a-button @click="onCancel" size="large">Cancel</a-button>
          <a-button
            style="margin-left: 38px"
            size="large"
            type="primary"
            @click.prevent="onSubmit"
          >Next</a-button>
        </div>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>
<script>
import { ideaTemplates } from "@/api/api";
import { Modal } from 'ant-design-vue'

export default {
  data() {
    const validatorName = (rule, value, callback) => {
      console.log("value", value);
      if (value === "") {
        callback(new Error("Ideation name is required"));
      } else if (value.length === 0) {
        callback(new Error("Please select channels to find participants"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        name: "",
        description: "",
        questions: []
      },
      rules: {
        name: [
          {
            required: true,
            message: "Ideation name is required",
            whitespace: true
          }
        ]
      },
      layout: {
          labelCol: { width: '200px' },
        wrapperCol: { span: 18 }
      },
      visible: false
    };
  },
  created() {
    this.initQuestion();
  },
  methods: {
    /**
     *  初始化问题列表
     *  1. 模版使用进入
     *  2. 新增
     */
    initQuestion() {
      // 模版新增
      const { templateId, name, questionForm, formDetail } = this.$route.query;
      console.log("questionForm", questionForm);
      if (questionForm) {
        this.ruleForm.questions = questionForm.questions;
        this.ruleForm.name = questionForm.name;
        this.ruleForm.description = questionForm.description;
        let count = 5 - this.ruleForm.questions.length;
        if (count > 0) {
          for (let i = 0; i < count; i++) {
            this.ruleForm.questions.push({
              content: ""
            });
          }
        }
        return;
      }
      if (templateId) {
        this.ruleForm.name = name;
        // 根据模版ID获取模版问题
        ideaTemplates.read(templateId).then(res => {
          console.log(res);
          this.ruleForm.questions = res.questions.map(el => {
            return {
              content: el.content
            };
          });

          let count = 5 - this.ruleForm.questions.length;
          if (count > 0) {
            for (let i = 0; i < count; i++) {
              this.ruleForm.questions.push({
                content: ""
              });
            }
          }
        });
      } else {
        this.ruleForm.questions = [
          {
            content: ""
          },
          {
            content: ""
          },
          {
            content: ""
          },
          {
            content: ""
          },
          {
            content: ""
          }
        ];
      }
    },
    onSubmit() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          this.$router.push({
            path: "/Dashboard/create-form",
            query: {
              questionForm: this.ruleForm,
              formDetail: this.$route.query.formDetail
            }
          });
        }
      });
    },
    onCancel() {
      const that = this
      Modal.confirm({
        title: () => "Are you sure?",
        content: () =>
          "Your progress won’t be saved and you haven’t completed the creation.",
        okText: "Yes, leave",
        cancelText: "No, continue",
        onOk() {
           that.$router.replace("/Dashboard");
        },
        onCancel() {
          console.log("Cancel");
        }
      });
     
    }
  }
};
</script>
<style lang="less">
.create_dashboard {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
    min-height: 100%;
    
    padding: 24px 10%;
  background-color: #ffffff;
  z-index: 999;
  ::v-deep.ant-input {
    background: #f1f3f4;
    &:focus {
      background: #ffffff;
    }
  }
}
</style>
